<template>
    <!-- 添加一个时间选择器 -->
    <div class="block">
        <span class="demonstration">选择时间：</span>
        <el-date-picker v-model="value2" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
        <div class="chart2" ref="chart2" id="chart2">

        </div>
    </div>

</template>

<script>
import { mapActions } from 'vuex';
import { PeoReslist, } from '@/api/charts/chart1';


export default {
    name: "chart2Component",
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

            value2: '',
            resdate: {
                beginDate: null,
                endDate: null,
            },

            chartId: 'chart2',
            option: {},
            chartData: []
        }
    },
    // 监听数据变化时重新获取数据
    watch: {
        // 监听需要更新图表的数据

        value2(newVal, oldVal) {
            console.log('value2:', this.value2);
            // console.log('New value:', newVal);
            // console.log('Old value:', oldVal);
            // 在这里处理新的值
            this.resdate.beginDate = this.value2[0];

            this.resdate.endDate = this.value2[1];

            this.getDataList(this.resdate);

        }

    },
    created() {
        // 传入时间参数，默认传入一个周的时间
        this.resdate.endDate = new Date();
        this.resdate.beginDate = new Date();
        this.resdate.beginDate.setTime(this.resdate.beginDate.getTime() - 3600 * 1000 * 24 * 7);
        console.log('this.resdate.endDate:', this.resdate.endDate);

        // 转换为 ISO 格式的字符串
        this.resdate.beginDate = this.resdate.beginDate.toISOString();
        this.resdate.endDate = this.resdate.endDate.toISOString();
        // 截取前 10 个字符，即 YYYY-MM-DD
        this.resdate.beginDate = this.resdate.beginDate.substring(0, 10);
        this.resdate.endDate = this.resdate.endDate.substring(0, 10);
        
        // console.log('this.beginDate:', this.beginDate);
        //  引用获取数据的方法
        console.log('this.resdate:', this.resdate);

        this.getDataList(this.resdate);
    },
    mounted() {



        // 指定图表的配置项和数据
        // 使用刚指定的配置项和数据显示图表。
        // console.log('this.option', this.option);

        // myChart.setOption(this.option);
        window.addEventListener('resize', this.handleResize);
    },

    beforeDestroy() {

        if (this.chart) {
            this.chart.dispose();
            window.removeEventListener('resize', this.handleResize);
        }
    },
    methods: {
        // ...mapActions('charts', ['createChart', 'destroyChart', 'updateChart']),

        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
        // 获取表格数据
        getDataList(resdate) {
            PeoReslist(resdate).then(res => {
                console.log("res:", res);
                this.chartData = res.data;
                console.log('this.chartData.datelist:', this.chartData.dateList.split(',').map(item =>
                    item
                ));
                console.log('this.chartData.numlist:', this.chartData.numList.split(',').map(item =>
                    item
                ));
                this.updateChart();
            }).catch(err => {
                console.log('err:', err);
            });
        },
        updateChart() {
            // 根据数据更新图表
            // const chart = echarts.init(document.getElementById('chart2'));
            const myChart = this.$echarts.init(this.$refs.chart2);
            console.log('this.chartData:', this.chartData);
            this.option = {
                title: {
                    text: '用户注册量'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' }
                },
                legend: {

                },
                xAxis: {
                    type: 'category',
                    name: '日期',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: this.chartData.dateList.split(',').map(item => item)
                },
                yAxis: {
                    type: 'value',
                    name: '数量'
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        name: '数量',
                        yAxisIndex: 0,
                        data: this.chartData.numList.split(',').map(item => item),
                        // label: {
                        //     show: true,
                        //     position: 'bottom',
                        //     textStyle: {
                        //         fontSize: 20
                        //     }
                        // }
                    }
                ]
            };
            myChart.setOption(this.option);
        },
    }
}
</script>

<style scoped>
.chart2 {
    height: 300px;
    width: 100%;
}
</style>